<template>
  <div class="container">
    <van-nav-bar fixed title="首页" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img
          class="banner-img"
          :src="`http://124.223.14.236:8060/` + item.advimgsrc"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3 slot="title" class="group-title">热门推荐</h3>
    </van-cell>
    <recommend-list ref="recommend" :recommend="recommend"/>
    <!-- 最近更新 -->
    <van-cell>
      <h3 slot="title" class="group-title">最近更新</h3>
      <span>24小时： <b>0篇</b></span> /
      <span>1周： <b>0篇</b></span>
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <article-list ref="article"  v-for="(item,index) in list" :key="index" :item="item" />
    </van-list>
  </div>
</template>
<script>
import {getNewList} from '../api/index'
  import articleList from '@/components/article-list.vue'
  import RecommendList from '../components/recommend-list.vue'
  // import {getIndexList} from '../api/index'
  export default {
    components: { articleList, RecommendList },
    created() {
      this.getIndexList()
      this.getHotList()
      // this.getNewList()
    },
    methods: {
      async getIndexList() {
        await this.$store.dispatch('indexList/getBannerList')
        console.log(this.$store.state.indexList.indexBanner)
        this.bannerList = this.$store.state.indexList.indexBanner
        // console.log(this.$refs.recommend.getHotList);
        // this.$refs.recommend.getHotList()
        // this.$refs.article.getNewList()
      },
      async getHotList() {
       const res =  await this.$store.dispatch('indexList/getHotList')
        // console.log(this.$store.state.indexList.indexBanner)
        // this.bannerList = this.$store.state.indexList.indexBanner
        console.log(res);
        this.recommend = res
      },
      async getNewList() {
        await this.$store.dispatch('indexList/getNewList')
        // console.log(this.$store.state.indexList.indexBanner)
        // this.bannerList = this.$store.state.indexList.indexBanner
         const list = await this.$store.state.indexList.news
        console.log(list)
        this.list = list
      },
       async onLoad() {
          // console.log(1212);
      // 异步更新数据
      
        const res =  await getNewList({page:this.page,limit:this.limit})
        console.log(res);
          this.list.push(...res.data.list.data)
      // await this.$store.commit('indexList/updatePage')
      // await this.$store.dispatch('indexList/getNewList')
      this.page++
      // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page > res.data.list.totalPages) {
          this.finished = true;
        }
    },
     
    },
    data() {
      return {
        list: [],
        bannerList: [],
        loading: false,
        finished: false,
        total: 0,
        page:1,
        limit:10,
        recommend:[]
      }
    }
  }
</script>
<style scoped lang="less">
  .banner-img {
    width: 100%;
  }
  .group-title {
    color: #1989fa;
  }
</style>
